<script lang="ts" setup>
import LinkApi from "@/api/content/z-link";

const currentYear = new Date().getFullYear();
const links = ref<any>([]);
links.value = [
  {
    title: "友情链接",
    items: [
      { name: "GitHub", url: "https://github.com" },
      { name: "Vue.js", url: "https://vuejs.org" },
      { name: "Element Plus", url: "https://element-plus.org" },
    ],
  },
  {
    title: "技术栈",
    items: [
      { name: "Vue 3", url: "#" },
      { name: "TypeScript", url: "#" },
      { name: "Element Plus", url: "#" },
    ],
  },
  {
    title: "联系我",
    items: [{ name: "Email: 903580396@email.com", url: "mailto:903580396@email.com" }],
  },
];

const loading = ref(false);

const pageQuery = reactive({
  pageNum: 1,
  pageSize: 100,
});

onMounted(() => {
  initData();
});

async function initData() {
  try {
    loading.value = true;
    const res = await LinkApi.getPage(pageQuery);
    // 截取数组前4个
    links.value[0].items = res.list.slice(0, 4);
  } catch (e) {
    console.log(e);
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <!-- 链接区域 -->
        <div v-loading="loading" class="footer-links">
          <div v-for="(section, index) in links" :key="index" class="link-section">
            <h3>{{ section.title }}</h3>
            <ul>
              <li v-for="(item, itemIndex) in section.items" :key="itemIndex">
                <a :href="item.url ?? item.address" target="_blank" rel="noopener noreferrer">
                  {{ item.name }}
                </a>
              </li>
            </ul>
          </div>
        </div>

        <!-- 分割线 -->
        <div class="footer-divider"></div>

        <!-- 版权信息 -->
        <div class="footer-bottom">
          <div class="footer-links-policy">
            <router-link to="/privacy-policy" class="policy-link">隐私政策</router-link>
            <span class="separator">|</span>
            <router-link to="/terms-of-service" class="policy-link">使用条款</router-link>
            <span class="separator">|</span>
            <router-link to="/contact" class="policy-link">联系我们</router-link>
            <span class="separator">|</span>
            <router-link to="/about" class="policy-link">关于我们</router-link>
          </div>
          <p>© {{ currentYear }} 数知笔记, All rights reserved.</p>
          <p class="footer-motto">
            <a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备2024106240号-2</a>
          </p>
        </div>
      </div>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
// body {
//   background-color: #1a1a1a;
//   color: #ffffff; /* 主要文字颜色使用白色 */
// }

/* 次要文字 */
.secondary-text {
  color: #b3b3b3; /* 浅灰色，用于次要信息 */
}

/* 链接样式 */
a {
  color: #4a9eff; /* 亮蓝色，用于链接 */
}
a:hover {
  color: #66adff; /* 鼠标悬停时稍微变亮 */
}

.footer {
  padding: 2rem 0;
  background-color: #1a1a1a;
  border-top: 1px solid rgba(255, 255, 255, 0.1);

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }

  .footer-content {
    .footer-links {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 3rem;

      .link-section {
        flex: 1;
        min-width: 180px;

        h3 {
          color: #ffffff;
          font-size: 1.1rem;
          margin-bottom: 1rem;
          font-weight: 500;
          letter-spacing: 0.5px;
        }

        ul {
          list-style: none;
          padding: 0;

          li {
            margin-bottom: 0.75rem;

            a {
              color: rgba(255, 255, 255, 0.6);
              text-decoration: none;
              font-size: 0.95rem;
              transition: all 0.2s ease;
              display: inline-block;

              &:hover {
                color: #fff;
                transform: translateX(5px);
              }
            }
          }
        }
      }
    }

    .footer-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.1);
      margin: 2rem 0;
    }

    .footer-bottom {
      text-align: center;
      color: rgba(255, 255, 255, 0.5);

      .footer-links-policy {
        margin-bottom: 1rem;

        .policy-link {
          color: rgba(255, 255, 255, 0.7);
          text-decoration: none;
          font-size: 0.9rem;
          transition: color 0.2s ease;

          &:hover {
            color: #4a9eff;
          }
        }

        .separator {
          margin: 0 0.5rem;
          color: rgba(255, 255, 255, 0.3);
        }
      }

      p {
        margin: 0.5rem 0;
        font-size: 0.9rem;
      }

      .footer-motto {
        color: rgba(255, 255, 255, 0.7);
        font-size: 1rem;
        margin-top: 0.5rem;
        letter-spacing: 0.5px;
      }
    }
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 1.5rem 0;

    .container {
      padding: 0 1rem;
    }

    .footer-content {
      .footer-links {
        gap: 1rem;
        justify-content: center;

        .link-section {
          flex: 0 0 calc(33.333% - 1rem); // 三列布局
          min-width: 0; // 允许更窄的宽度
          text-align: center;

          h3 {
            font-size: 0.95rem;
            margin-bottom: 0.75rem;
          }

          ul li {
            margin-bottom: 0.5rem;

            a {
              font-size: 0.85rem;
              white-space: nowrap; // 防止文字换行
              overflow: hidden;
              text-overflow: ellipsis; // 超出显示省略号
              max-width: 100%; // 确保不会超出容器
              display: block;
              padding: 0.2rem 0;

              &:hover {
                transform: none;
              }
            }
          }
        }
      }

      .footer-divider {
        margin: 1.2rem 0;
      }

      .footer-bottom {
        p {
          font-size: 0.85rem;
          line-height: 1.5;
        }
      }
    }
  }
}

// 超小屏幕优化
@media (max-width: 480px) {
  .footer {
    .footer-content {
      .footer-links {
        .link-section {
          flex: 0 0 100%; // 在超小屏幕下改为单列
          margin-bottom: 1rem;

          h3 {
            font-size: 1rem;
          }

          ul li a {
            font-size: 0.9rem;
            white-space: normal; // 允许文字换行
          }
        }
      }
    }
  }
}
</style>
